import React, { PureComponent } from 'react';
import { AutoComplete, Input, Form, Popover, Row, Col, Button } from 'antd';
import styles from './index.less';
import TopicContent from './TopicContent';

const FormItem = Form.Item;
const { TextArea } = Input;


export default class Forward extends PureComponent {
  state = {
    topic:'',
    visible: false
  }

  hide = () => {
    this.setState({
      visible: false,
    });
  }
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  }
  handleChange = (e) => {
    if(e.target){
      if (this.props.onChange) this.props.onChange(e.target.value)
    }else {
      if (this.props.onChange) this.props.onChange(e)
    }
  }
  handleTopicChange = (val) => {
    const { props } = this.props;
    let value = '';
    if (!this.props.props.value) {
       value = `#${val}#`;
    } else {
       value = `${this.props.props.value}#${val}#`;
    }
    if (this.props.onChange) this.props.onChange(value);

    this.handleChange(value);
  }
  handleOk = () => {
    this.setState({
      visible: false
    });
  }
  render() {
    const { name, props, rules } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const value = getFieldValue(name);
    const newRules = [...rules];
    const max = rules.find(item => !!item.max);
    const maxLength = max ? max.max : 100;
    const suffix = (
      <div
      className={styles.textAreaCount}
      style={{ color: value && value.length > maxLength ? '#f00' : '#444' }}>
        { value ? value.length : 0}/{maxLength}
      </div>
    );
    return (
      <div className={styles.taskListInp}>
        <span>
          <FormItem colon={false} label={props.className && props.className.indexOf('creator-input-title') >= 0 ? '' : props.label}>
            {getFieldDecorator(name, {
              initialValue: props.value,
              rules: newRules,
            })(
            <div style={{backgroundColor:'#c4deff',padding:'10px'}}>
              <p>{props.title}</p>
              <TextArea
                onChange={this.handleChange}
                autosize={{ minRows: 5, maxRows: props.rows }}
                placeholder={props.placeholder}
                value={props.value}
              />
              <Popover 
                trigger="click"
                placement="bottomLeft"
                onVisibleChange={this.handleVisibleChange}
                visible={this.state.visible}
                content={
                  <TopicContent props={props} 
                    value={props.value}
                    onChange={(value) => this.handleTopicChange(value)} onOk={this.handleOk}/>}
              >
                <a className={styles.topic}># 话题</a>
              </Popover>
            </div>
            )}
          </FormItem>
          {suffix}
        </span>
      </div>
    );
  }
}
